<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>系统健康状态</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./layui/css/layui.css" media="all">
  </head>
  <body>

    <fieldset class="layui-elem-field layui-field-title">
      <legend>系统健康状态</legend>
    </fieldset>

    <div style="padding: 20px; background-color: #F2F2F2; text-align: center;">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md2">
          <div class="layui-card">
            <div class="layui-card-header">服务器主机名称</div>
            <div class="layui-card-body" id="text_machine">

            </div>
          </div>
        </div>
        <div class="layui-col-md2">
          <div class="layui-card">
            <div class="layui-card-header">应用进程ID</div>
            <div class="layui-card-body" id="text_pid">

            </div>
          </div>
        </div>
        <div class="layui-col-md2">
          <div class="layui-card">
            <div class="layui-card-header">系统内存使用率</div>
            <div class="layui-card-body" id="text_memory">

            </div>
          </div>
        </div>
        <div class="layui-col-md2">
          <div class="layui-card">
            <div class="layui-card-header">系统CPU使用率</div>
            <div class="layui-card-body" id="text_cpu">

            </div>
          </div>
        </div>
        <div class="layui-col-md2">
          <div class="layui-card">
            <div class="layui-card-header">JVM内存使用量</div>
            <div class="layui-card-body" id="text_jvm">

            </div>
          </div>
        </div>
        <div class="layui-col-md2">
          <button type="button" class="layui-btn layui-btn-lg" id="bt_refresh">
            <i class="layui-icon">&#x21bb;</i> 刷新
          </button>
        </div>
      </div>
    </div>
    <script src="./layui/layui.js" charset="utf-8"></script>
    <script src="./js/common.js" charset="utf-8"></script>

    <script type="text/javascript">
      layui.use(['layer', 'jquery', 'element'], function(){
        var layer = layui.layer;
        var $ = layui.jquery;

        var reloadHealth = function(){
          clear();
          $.ajax({
            url:sboot.service_url('/health/'),
            type:"GET",
            datatype:"json",
            async:true,
            success:function(result){
              if(result){
                set_value(result);
              }
            }
          });
        };

        var clear = function(){
          layui.$('#text_machine').html("");
          layui.$('#text_pid').html("");
          layui.$('#text_memory').html("");
          layui.$('#text_cpu').html("");
          layui.$('#text_jvm').html("");
        };

        var set_value = function(data){
          layui.$('#text_machine').html(data.machine);
          layui.$('#text_pid').html(data.processId);

          if(data.memoryUsage){
            layui.$('#text_memory').html(sboot.round(data.memoryUsage*100,2) + " %");
          }else{
            layui.$('#text_memory').html("-");
          }

          if(data.cpuUsage){
            layui.$('#text_cpu').html(sboot.round(data.cpuUsage*100,2) + " %");
          }else{
            layui.$('#text_cpu').html("-");
          }

          if(data.jvmMemory){
            layui.$('#text_jvm').html(sboot.round(data.jvmMemory,2) + data.jvmMemoryUnit);
          }else{
            layui.$('#text_jvm').html("-");
          }
        };

        $('#bt_refresh').on('click', function(){
            reloadHealth();
        });

        reloadHealth();
      });
    </script>

    <script>

    </script>
  </body>
</html>